<template>
  <div class="course-learn">
    <van-nav-bar
      title="课程播放"
      left-arrow
      :fixed="true"
      :placeholder="true"
      :z-index="999"
      :safe-area-inset-top="true"
      @click-left="goBack"
    />
    <!-- 学习部分 -->
    <div class="course-learn-player" >
      <div class="lesson-loading" v-if="isshowLoading">
        <van-loading color="#0094ff" size="24px" vertical />加载中...
      </div>

      <component
        ref="normalChild"
        :is="playerName"
        :courseId="courseId"
        :coursewareId="coursewareId"
        :isDrag="isDrag"
        :doubleSpeed="doubleSpeed"
        :from="from"
        @nextLessonPlay="nextLessonPlay"
      />
    </div>
  </div>
</template>

<script>
import { getCourseLessons, getCourseLessonsDetail } from '@/api/course'
import documentPlayer from '../compontents/document/index'
import videoboPlayer from '../compontents/video/index'
export default {
  name: 'learnKnowledge',
  components: {
    documentPlayer,
    videoboPlayer
  },
  data() {
    return {
      from: this.$route.query.from, // p培训任务还是课程
      trainId: this.$route.query.trainId, // 培训ID
      stageId: this.$route.query.stageId, // 阶段ID
      learnFrom: this.$route.query.learnFrom, // 课程 培训来源 是否是讲师页面跳转
      lectorId: this.$route.query.lectorId, // 讲师ID
      courseId: this.$route.query.uuid, // 课程ID
      coursewareId: this.$route.query.coursewareId, // 课件ID
      coursewareIndex: this.$route.query.coursewareIndex,
      coursewareType: this.$route.query.coursewareType,
      isDrag: this.$route.query.isDrag, // 课件是否可拖动
      doubleSpeed: this.$route.query.doubleSpeed, // 课件是否开启倍速
      learnMode: this.$route.query.learnMode, // 学习类型 解锁 or 不解锁
      type: this.$route.query.type, // 标识我的选修还是必修还是课程中心点进来的
      companyId: window.localStorage.getItem('companyId'),
      // 课程详情
      courseDetail: {},
      // 学员学习课程详情
      courseInfo: {},
      // 课程列表
      coursewareList: [],
      // 播放组件的名称
      playerName: null,
      // 是否已加入选修
      isJion: true,
      // 课件数据
      lessonData: null,
      // 显示加载组件时的加载动画
      isshowLoading: false,
      sourceId: ''
    }
  },
  computed: {},
  created() {
    if (this.from == 'train') {
      this.sourceId = this.$route.query.trainId
    } else {
      this.sourceId = this.$route.query.uuid
    }
  },
  mounted() {
    this.isshowLoading = true
    // 开始播放
    this.startPlay(this.coursewareIndex, 'first')
  },
  methods: {
    // 返回课程详情页
    goBack() {
      if (this.from == 'train') {
        this.$router.replace({
          name: 'trainDetail',
          query: {
            uuid: this.$route.query.trainId,
            learnFrom: this.learnFrom,
            lectorId: this.lectorId
          }
        })
      } else {
        this.$router.replace({
          name: 'knowledgeDetail',
          query: {
            uuid: this.courseId,
            type: this.type,
            learnFrom: this.learnFrom,
            lectorId: this.lectorId
          }
        })
      }
    },
    /**
     * 开始播放
     * @param {number} index 课件序列号
     */
    startPlay(index, first) {
      this.playerName = ''
      const _index = index ? index : 0
      this.isshowLoading = true
      // console.log(this.coursewareType)
      if (this.coursewareType === 'video') {
        getCourseLessonsDetail(this.coursewareId, {
          from: this.from,
          sourceId: this.sourceId,
          courseId: this.courseId,
          stageId: this.stageId ? this.stageId : this.courseId
        })
          .then(res => {
            this.lessonData = res.data
            // 视频课件
            this.playerName = 'videoboPlayer'
          })
          .catch(err => {
            console.log(err)
          })
      } else if (this.coursewareType === 'document') {
        getCourseLessonsDetail(this.coursewareId, {
          from: this.from,
          sourceId: this.sourceId,
          courseId: this.courseId,
          stageId: this.stageId ? this.stageId : this.courseId
        })
          .then(res => {
            this.lessonData = res.data
            // 文档课件
            this.playerName = 'documentPlayer'
          })
          .catch(err => {
            console.log(err)
          })
      }
      // console.log(this.playerName)
      if (!first) {
        // console.log('跳转下一节')
        this.$router
          .replace({
            name: 'learnKnowledge',
            query: {
              uuid: this.courseId,
              coursewareType: this.coursewareType,
              coursewareId: this.coursewareId,
              coursewareIndex: _index,
              isDrag: this.isDrag,
              doubleSpeed: this.doubleSpeed,
              learnMode: this.learnMode,
              from: this.from,
              trainId: this.trainId,
              stageId: this.stageId,
              learnFrom: this.learnFrom,
              lectorId: this.lectorId
            }
          })
          .catch(err => err)
      }
      setTimeout(() => {
        this.isshowLoading = false
      }, 1000)
    },

    // 课件播放完成，播放下一节
    nextLessonPlay(nextCourseware) {
      // console.log(nextCourseware)
      if (nextCourseware && nextCourseware.uuid == '') {
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: `恭喜您，完成了本课时的学习！`,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showCancelButton: false,
            closeOnClickModal: false
          })
          .then(action => {
            if (action === 'confirm') {
              if (this.from == 'train') {
                this.$router.replace({
                  name: 'trainDetail',
                  query: {
                    uuid: this.trainId,
                    learnFrom: this.learnFrom,
                    lectorId: this.lectorId
                  }
                })
              } else {
                this.$router.replace({
                  name: 'knowledgeDetail',
                  query: {
                    uuid: this.courseId,
                    type: this.type,
                    learnFrom: this.learnFrom,
                    lectorId: this.lectorId
                  }
                })
              }
            }
          })
          .catch(err => {
            console.error(err)
          })
      } else {
        // 已完成本课件，提示下一课件的名字
        if (this.coursewareType == 'document') {
          this.$dialog
            .confirm({
              title: '温馨提示',
              message: `您已经完成了本课件的最短学习时间，是否继续学习本课件？`,
              confirmButtonText: '下一课',
              cancelButtonText: '继续学习',
              showCancelButton: true,
              closeOnClickModal: false
            })
            .then(action => {
              if (action === 'confirm') {
                this.courseId = nextCourseware.courseId
                this.coursewareId = nextCourseware.uuid
                this.coursewareType = nextCourseware.coursewareType
                this.coursewareIndex = this.coursewareIndex + 1
                this.startPlay(this.coursewareIndex)
              }
            })
            .catch(err => {
              console.error(err)
            })
        } else {
          this.$dialog
            .confirm({
              title: '温馨提示',
              message: `恭喜您，完成了本课时的学习！【下一课:${nextCourseware.title}】`,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              showCancelButton: true,
              closeOnClickModal: false
            })
            .then(action => {
              if (action === 'confirm') {
                this.courseId = nextCourseware.courseId
                this.coursewareId = nextCourseware.uuid
                this.coursewareType = nextCourseware.coursewareType
                this.coursewareIndex = this.coursewareIndex + 1
                this.startPlay(this.coursewareIndex)
              }
            })
            .catch(err => {
              console.error(err)
            })
        }
      }
    },

    // 获取课件列表
    getLessonList(callback) {
      let _lessonList = []
      new Promise(reslove => {
        getCourseLessons({
          courseId: this.courseId
        })
          .then(res => {
            _lessonList = res.data
            this.coursewareList = _lessonList
            reslove()
          })
          .catch(err => {
            console.log(err)
          })
      })
        .then(() => {
          if (callback && typeof callback === 'function') {
            callback()
          }
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

<style scoped lang="less">
@import 'index';
</style>
